import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { publicProfile } from '@/lib/account/queries';
import { Card, CardHeader, Delta, Table, th, td, tdNum } from '@/components/ui/primitives';
import { Donut } from '@/components/account/charts';
import { ValueSourceBadge } from '@/components/account/portfolio-widgets';
import { fmtMoney, confidenceLabel } from '@/lib/format';

export async function generateMetadata({ params }: { params: Promise<{ handle: string; slug: string }> }): Promise<Metadata> {
  const { handle, slug } = await params;
  const p = await publicProfile(handle);
  const c = p?.collections.find((x) => x.collection.publicSlug === slug);
  if (!p || !c) return { title: 'Collection not found' };
  return { title: `${c.collection.name} · ${p.user.name ?? `@${handle}`}`, description: c.collection.description ?? `${c.summary.itemCount} items on RareIndex` };
}

export default async function PublicCollectionPage({ params }: { params: Promise<{ handle: string; slug: string }> }) {
  const { handle, slug } = await params;
  const p = await publicProfile(handle);
  const c = p?.collections.find((x) => x.collection.publicSlug === slug);
  if (!p || !c) notFound();
  const items = p.items.filter((i) => i.collectionId === c.collection.id);
  const rows = [...c.summary.items].sort((a, b) => (b.valueUsd ?? 0) - (a.valueUsd ?? 0));
  return (
    <div className="mx-auto max-w-5xl">
      <nav className="mb-2 pt-4 text-xs text-muted">
        <Link href={`/u/${handle}`} className="hover:text-fg">
          @{handle}
        </Link>{' '}
        / <span className="text-fg">{c.collection.name}</span>
      </nav>
      <header className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
        <div>
          <h1 className="text-2xl font-semibold tracking-tight">{c.collection.name}</h1>
          {c.collection.description ? <p className="mt-1 text-sm text-muted">{c.collection.description}</p> : null}
        </div>
        <div className="text-right">
          <p className="num text-2xl font-semibold">{c.summary.valuedCount ? fmtMoney(c.summary.valueUsd) : '—'}</p>
          <p className="text-xs text-muted">
            {c.summary.itemCount} items · confidence {confidenceLabel(c.summary.confidence)}
          </p>
        </div>
      </header>
      <div className="mb-5 grid gap-4 md:grid-cols-3">
        <Card className="md:col-span-1">
          <CardHeader title="Allocation" />
          <div className="p-4">
            <Donut data={c.summary.allocationByCategory.map((b) => ({ label: b.label, value: b.valueUsd }))} size={100} />
          </div>
        </Card>
        <Card className="md:col-span-2">
          <CardHeader title="Items" />
          <Table>
            <thead>
              <tr>
                <th className={th}>Item</th>
                <th className={th}>Variant</th>
                <th className={`${th} text-right`}>Qty</th>
                <th className={`${th} text-right`}>Value</th>
                <th className={th}>Basis</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((i) => {
                const src = items.find((x) => x.id === i.id)!;
                return (
                  <tr key={i.id}>
                    <td className={td}>
                      <div className="flex items-center gap-2.5">
                        {src.photos[0] || src.heroImageUrl ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img src={src.photos[0] ?? src.heroImageUrl ?? ''} alt="" className="h-9 w-9 rounded-sm object-cover" />
                        ) : (
                          <span className="h-9 w-9 rounded-sm bg-inset" />
                        )}
                        <Link href={`/asset/${src.assetSlug}`} className="max-w-[260px] truncate font-medium hover:underline">
                          {i.title}
                        </Link>
                      </div>
                    </td>
                    <td className={`${td} text-xs`}>{src.variantLabel ?? (i.grader ? `${i.grader.toUpperCase()} ${i.grade ?? ''}` : src.condition ?? '—')}</td>
                    <td className={tdNum}>{i.quantity}</td>
                    <td className={tdNum}>{i.valueUsd === null ? <span className="text-subtle">—</span> : fmtMoney(i.valueUsd)}</td>
                    <td className={td}>
                      <ValueSourceBadge item={i} />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
        </Card>
      </div>
      <p className="text-[11px] text-subtle">
        Shared by @{handle}. Values are RareIndex Valuation estimates; <Delta value={c.summary.returnPct} /> return is shown without purchase details. RareIndex does not authenticate items.
      </p>
    </div>
  );
}